<template>
  <div id="cost">
    <van-nav-bar title="钱包" left-arrow @click-left="onClickLeft" fixed/>
    <div class="cost-content">
      <van-cell title="余额" icon="gold-coin" is-link :value="money|| 0+'元'"/>
      <!-- <van-cell title="积分" icon="card" is-link :value="user.bonuspoints+'分'"/>
      <van-cell title="优惠劵" icon="coupon" is-link value="无优惠券"/> -->
      <van-cell title="充值" icon="bill" is-link @click="show=true"/>
    </div>
    <van-popup v-model="show" position="bottom" class="popup" close-on-click-overlay>
      <van-cell-group>
        <van-field v-model="payMoney" placeholder="充值数值"/>
        <van-radio-group v-model="radio">
          <span>支付方式：</span>
          <!-- <van-radio name="余额">余额</van-radio> -->
          <van-radio name="微信">微信</van-radio>
          <van-radio name="支付宝">支付宝</van-radio>
        </van-radio-group>
        <van-button type="primary" size="large" @click="payment">确认支付</van-button>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
import {
  NavBar,
  Panel,
  Button,
  CellGroup,
  cell,
  Toast,
  Popup,
  Field,
  RadioGroup,
  Radio,
} from "vant";
import { mapState } from "vuex";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Panel.name]: Panel,
    [Button.name]: Button,
    [cell.name]: cell,
    [Toast.name]: Toast,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio
  },
  data() {
    return {
      show: false,
      url: this.$store.state.url1,
      user: {},
      money: 0,
      id: '',
      radio:'微信',
      payMoney: 0
    };
  },
  beforeCreate() {
    this.$store.dispatch("reflashSet");
  },
  created() {
    this.getInfo()
    // this.money = Number(localStorage.money)
    this.id = localStorage.userid
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async payment() {
        try{ 
          if(this.payMoney <=  0) return Toast('充值金额不得小于0');
            const { data : res } = await this.$api.Recharge.userRecharge({
              id: this.id,
              money: this.payMoney
            })
            if(res.code) return Toast(res.msg);
            Toast.success('充值成功')
            this.money = this.payMoney
            this.show = false
            this.getInfo()
        }catch(e){ 
          console.log(e);
        }
    },
    async getInfo() { 
      try{
         const { data : res } = await this.$api.User.getUserInfo({ 
           id: localStorage.userid
         })
         if(res.code) return false 
         console.log(res);
         this.money = res.result[0].money
          window.localStorage.setItem("money", res.result[0].money);
      }catch(e){ 
        console.log(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$blue: #2d8cf0;
#cost {
  font-size: 0.24rem;
  background: #ebedf0;
}
.cost-content {
  margin-top: 0.84rem;
  .van-cell:last-child {
    margin-top: 0.2rem;
  }
}
.van-radio-group{
  display: flex;
  height: 1rem;
  justify-content: flex-start;
  align-items: center;
  span{
    margin-left: .3rem;
  }
}
.van-radio{
  margin-right: .3rem;
}
.popup{
  width: 100%;
  margin: auto;
}
</style>
